<template>
  <div class="newTableMain">
    <div class="listBox">
      <el-collapse v-model="activeNames">
      <el-collapse-item title="Table properties" name="1">
        <el-form ref="form" :model="form" label-width="120px">
          <el-form-item label="Table name"><el-input v-model="form.tableName" size="small"/></el-form-item>
          <el-form-item label="Engine"><el-input v-model="form.engine" size="small" /></el-form-item>
          <el-form-item label="Comment"><el-input v-model="form.comment" size="small" /></el-form-item>
        </el-form>
      </el-collapse-item>
      <el-collapse-item title="Colums" name="2">
        <template slot="title">
          <div class="flex align-center justify-between" style="width: 100%; padding-right: 10px; box-sizing: border-box;">
             <span>
              Colums({{ dataColumns.length }})
             </span>
             <span @click.stop="addColumns" class="flex align-center">
              <i class="header-icon el-icon-circle-plus"></i>Add new
             </span>
          </div>
        </template>
        <el-table :data="dataColumns" border>
          <el-table-column v-for="item in tableColumn" :key="item.label" :label="item.label" align="center">
            <template slot-scope="scope">
              <el-input size="small" />
            </template>
          </el-table-column>
          <el-table-column label="" align="center" width="100px">
            <template slot-scope="scope">
              <el-button type="text" icon="el-icon-delete">
                Remove
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
      <el-collapse-item title="Primary Key" name="3">
        <el-table :data="dataKey" border>
          <el-table-column label="Columns" prop="Columns" align="center">
          </el-table-column>
          <el-table-column label="" align="center" width="100px">
            <template slot-scope="scope">
              <el-button type="text" icon="el-icon-delete">
                Remove
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
      <el-collapse-item title="Indexes" name="4">
        <template slot="title">
          <div class="flex align-center justify-between" style="width: 100%; padding-right: 10px; box-sizing: border-box;">
             <span>
              Indexes({{ dataIndexes.length }})
             </span>
            <span @click.stop="addIndexes" class="flex align-center">
              <i class="header-icon el-icon-circle-plus"></i>Add new
             </span>
          </div>
        </template>
        <el-table :data="dataIndexes" border>
          <el-table-column v-for="item in tableIndex" :key="item.label" :label="item.label" align="center">
            <template slot-scope="scope">
              <el-input size="small" />
            </template>
          </el-table-column>
          <el-table-column label="" align="center" width="100px">
            <template slot-scope="scope">
              <el-button type="text" icon="el-icon-delete">
                Remove
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
      <el-collapse-item title="Unique constraints" name="5">
        <template slot="title">
          <div class="flex align-center justify-between" style="width: 100%; padding-right: 10px; box-sizing: border-box;">
             <span>
              Unique constraints({{ dataUnique.length }})
             </span>
            <span @click.stop="addUnique" class="flex align-center">
              <i class="header-icon el-icon-circle-plus"></i>Add new
             </span>
          </div>
        </template>
        <el-table :data="dataUnique" border>
          <el-table-column v-for="item in tableUnique" :key="item.label" :label="item.label" align="center">
            <template slot-scope="scope">
              <el-input size="small" />
            </template>
          </el-table-column>
          <el-table-column label="" align="center" width="100px">
            <template slot-scope="scope">
              <el-button type="text" icon="el-icon-delete">
                Remove
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
      <el-collapse-item title="Foreign keys" name="6">
        <template slot="title">
          <div class="flex align-center justify-between" style="width: 100%; padding-right: 10px; box-sizing: border-box;">
             <span>
              Foreign keys({{ dataForeign.length }})
             </span>
            <span @click.stop="addForeign" class="flex align-center">
              <i class="header-icon el-icon-circle-plus"></i>Add new
             </span>
          </div>
        </template>
        <el-table :data="dataForeign" border>
          <el-table-column v-for="item in tableForeign" :key="item.label" :label="item.label" align="center">
            <template slot-scope="scope">
              <el-input size="small" />
            </template>
          </el-table-column>
          <el-table-column label="" align="center" width="100px">
            <template slot-scope="scope">
              <el-button type="text" icon="el-icon-delete">
                Remove
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
    </el-collapse>
    </div>
    <div class="btnGroup flex align-center">
      <el-button size="mini" type="primary" icon="el-icon-plus">Create Table</el-button>
      <el-button size="mini" icon="el-icon-plus">Add column</el-button>
      <el-button size="mini" icon="el-icon-plus">Add Index</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'NewTable',
  data(){
    return {
      activeNames: ['1'],
      tableColumn: [{
        label: "Name"
      }, {
        label: "Nullability"
      }, {
        label: "Data Type"
      }, {
        label: "Default value"
      }, {
        label: "Computed Expression"
      }, {
        label: "Unsigned"
      }, {
        label: "Zero fill"
      }, {
        label: "Comment"
      }],
      tableIndex: [{
        label: "Name"
      }, {
        label: "Columns"
      }, {
        label: "Unique"
      }],
      tableUnique: [{
        label: "Name"
      }, {
        label: "Columns"
      }],
      tableForeign: [{
        label: "Name"
      }, {
        label: "Base columns"
      }, {
        label: "Referenced table"
      }, {
        label: "Referenced columns"
      }, {
        label: "ON UPDATE"
      }, {
        label: "ON DELETE"
      }],
      dataIndexes: [],
      dataColumns: [],
      dataUnique: [],
      dataForeign: [],
      dataKey: [{
        Columns: 'id'
      }],
      form: {tableName: '', engine: '', comment: ''}
    }
  },
  methods: {
    addColumns() {
      this.dataColumns = [...this.dataColumns, {}]
    },
    addIndexes() {
      this.dataIndexes = [...this.dataIndexes, {}]
    },
    addUnique() {
      this.dataUnique = [...this.dataUnique, {}]
    },
    addForeign() {
      this.dataForeign = [...this.dataForeign, {}]
    }
  }
}
</script>
<style lang="scss" scoped>
.newTableMain{
  height: 100%;
}
.listBox{
  height: calc(100% - 40px);
  overflow-x: hidden;
}
.btnGroup{
  height: 40px;
  background: #f1f1f1;
  padding: 0 10px;
}
::v-deep .el-table .el-table__cell{
  padding: 4px 0;
}
::v-deep .el-collapse-item__content{
  padding-bottom: 15px;
}
::v-deep .el-collapse-item__header{
  background: #f1f1f1;
  padding: 0 15px;
  margin-bottom: 15px;
}
.el-icon-circle-plus{
  font-size: 18px;
  margin-right: 5px;
}
</style>
